import type { GreasyForkElements } from '../../../../../../../../../types/constants/personalization/greasy_fork'
import {
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../../types/constants'

// 测试链接：https://greasyfork.org/zh-CN/users/sign_in
export class SignInPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private static instance: SignInPage

  /**
   * 获取单例实例
   */
  public static getInstance(): SignInPage {
    if (!SignInPage.instance) {
      SignInPage.instance = new SignInPage()
    }
    return SignInPage.instance
  }

  init(): void {
    this.wrapAuthLinks()
  }

  private wrapAuthLinks(): void {
    const $authLinks = $('.text-content').find('a[href*="/users/sign_up"], a[href*="/users/password/new"]')

    if ($authLinks.length > 0) {
      $authLinks.wrapAll('<div class="auth-links-container"></div>')
    }
  }

  getMainStyles(): string {
    return `
.text-content {
  form.new_user, form.external-login-form {
    background-color: transparent !important;
  }
  
  form.external-login-form {
    border: none !important;
  }
  
  .auth-links-container {
    display: flex;
    gap: 32px;
    margin-top: 24px;
    align-items: center;
    justify-content: center;
  }
}
`
  }
}
